<template>
  <div id="questionnaire-release">
    <div class="main-container container-fluid page-holder">
      <div class="easy-container-x2 border-bottom"></div>
      <el-row :gutter="30">
        <el-col :sm="6" class="title-container none-select">
          <div class="page-title-holder no-border-bottom">
            <h2 class="page-title">问卷发布</h2>
          </div>
          <p>正确选择问卷发布方式，可以缩小问卷的投放范围。</p>
        </el-col>
        <el-col :sm="18">
          <el-form ref="questionnaireReleaseForm" label-position="top" :model="release"
                   class="bold-label form-border m-t-16">
            <el-form-item label="发布方式">
              <div class="body-line-height">
                <el-radio-group v-model="release.type">
                  <el-radio label="groups">群组发布</el-radio>
                  <el-radio label="public">公开发布</el-radio>
                </el-radio-group>
                <div v-show="typeGroups" class="info m-t-10 m-l-16" v-html="groupsTip"></div>
              </div>
            </el-form-item>
            <el-form-item v-if="typeGroups" :label="`选择群组 (${release.groupsId.length})`">
              <el-checkbox-group v-model="release.groupsId">
                <el-checkbox v-for="group in groups" :key="group.id" :label="group.id">
                  {{ group.title }}({{ group.owner.nickname }})</el-checkbox>
              </el-checkbox-group>
              <el-button size="small" class="full" v-show="nextPage"
                         @click="loadSelfGroups(nextPage)"
                         :loading="isLoading">加载更多群组</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">确认发布</el-button>
              <el-button class="right" @click="goBack">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as formatGroups from '@/views/groups/format';

export default {
  name: 'QuestionnaireRelease', // 问卷发布
  data() {
    return {
      groups: [], // 群组数据
      isLoading: false, // 加载群组数据
      nextPage: null,
      release: {
        type: 'groups', // 发布方式
        groupsId: this.$store.state.currentQuestionnaire.releasedGroupsId, // 选择的群组
      },
    };
  },
  computed: {
    typeGroups() { return this.release.type === 'groups'; },
    groupsTip() { return '· 仅群组成员可以填写；<br>· 问卷会显示在群组中。'; },
  },
  methods: {
    // 加载自己管理的群组
    loadSelfGroups(page = 1) {
      this.isLoading = true;
      this.$api.groups.index({ type: 'question', page })
        .then(res => this.handleRes(res))
        .catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 处理请求到的群组数据
    handleRes(res) {
      this.groups.push(...formatGroups.formatGroups(res.data));
      this.nextPage = res.kaminari.next_page;
    },
    // 发布问卷
    onSubmit() {
      const msg = this.$store.state.currentQuestionnaire.released
        ? '当前问卷已发布，重新发布会覆盖原有发布规则，是否继续？'
        : '问卷发布后不允许再修改，请保证问卷准确无误。';
      this.$msgbox({
        title: '提示',
        message: msg,
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '发布中...',
            });
            this.$api.questionnaires.release({
              qnId: this.$route.params.qnId,
              type: this.release.type,
              groupsId: this.release.groupsId,
            }).then(() => {
              this.$message.success('发布成功');
              this.$router.push(`/${this.$rp.QUESTIONNAIRES}`); // 返回问卷列表
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
  created() { this.loadSelfGroups(); },
};
</script>

<style></style>
